<template>

    <div style="padding:10px;height:100%; ">
        <el-form :inline="true">
        
        <slot name="search" />
  
      </el-form>
      <el-table
        style="width:100%"
        :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        height="500px"
        v-loading="listLoading"
        element-loading-text="Loading"
        ref="table"
        border
      >
        <el-table-column
          align="center"
          type="index"
          width="50"
          label="序号"
          fixed="left"
        >
          <template slot-scope="scope">
            <span>{{(currentPage- 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
  
        <DataListItem
          v-bind:key="$index"
          v-for="(item,$index) in cols"
          :column="item"
        />
  
       
  
      </el-table>
      <el-pagination
        align="right"
        style="margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 150, 200]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      >
      </el-pagination>
   
    </div>
  </template>
  <script>
  import Vue from "vue";
  import request from "@/utils/request";
  import { getUser } from "@/utils/auth";
  import EditDlg from "@/components/EditDlg";
  import linq from "linq";
  import axios from "axios";
  import { uuid } from "vue-uuid";
  export default {
    props: ["cols","cate","fetchData"],
    components: {
      EditDlg,
      DataListItem: {
        name: "DataListItem",
        template: `<el-table-column :label='column.label' :prop='column.prop' align="center">
            
            <DataListItem :key="$index" v-for="(item,$index) in column.data?column.data:[]" :column="item" />
            </el-table-column>
            `,
        props: ["column"]
      }
    },
    data: function() {
      return {
        model: {},
        listLoading: true,
        list: [],
        currentPage: 1,
       
        pageSize: 20,
        user: null
      };
    },
  
    async created() {
      //
      this.listLoading = true;
      let datas = await this.fetchData(this.cate);
      this.raw_data = datas;
      this.list = JSON.parse(JSON.stringify(this.raw_data));
      this.listLoading = false;
      //
    },
  
    methods: {
    
      handleSizeChange: function(size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
      },
      // onDlgCreated() {
      //   this.$parent.onDlgCreated ? this.$parent.onDlgCreated(this.model) : "";
      // },
     
    }
  };
  </script>